

<template>
  <div class="wrapCenterpx">
    <div class="Dailysale">
      <div class="titleBox">
        <div class="titleLogo">
          <img :src="itemData.image" alt="" />
          <div>{{ itemData.name }}</div>
          <!-- <span>超值好货</span> -->
        </div>
        <div class="titleMore" @click="Seemore">
          <span>更多</span>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </div>
      <div class="DailysaleList">
        <div class="list" v-for="item in dailydataList" :key="item.id">
          <img :src="item.image" alt="" />
          <div class="name">{{ item.product_name }}</div>
          <div class="saleType">{{ item.product_info }}</div>
          <div class="Price">
            <div class="yesPrice"><span class="￥">￥</span>{{ item.price }}</div>
            <div class="noPrice">
              <s><span class="￥">￥</span>{{ item.ot_price }}</s>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
   
<script setup>
import { useRouter } from "vue-router";
import { defineProps, ref } from "vue";
import { ArrowRight } from "@element-plus/icons-vue"; // icon 按需引入
import { number } from "@intlify/core-base";
import { ProductgetIndexTypeProduct } from "../../../utils/api"
const props = defineProps({
  //子组件接收父组件传递过来的值
  dailyList: Array,
  typeID: number,
  itemData:{}
});

const router = useRouter()
const Seemore = () => {
  console.log(props.typeID ,'----props.typeID ');
  router.push({ path: props.itemData.tab, query: { typeID: props.typeID } })
}
const dailydataList = ref([])
let params = { type_id: props.typeID, page: 1, limit: 4 }
ProductgetIndexTypeProduct(params).then(res => {
  dailydataList.value = res.data.data;
})


// const emit = defineEmits(["chageBrand"]);
</script>
   
<style scoped lang="less">
.wrapCenterpx {
  width: 1472px;
  margin: 0 auto;
  margin-top: 40px;

  .Dailysale {
    width: 1472px;
    height: 605px;
    background: #ffffff;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .titleBox {
      height: 40px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titleLogo {
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }

        div {
          font-size: 28px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffc047;
          margin-right: 10px;
        }

        span {
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }

      .titleMore {
        display: flex;
        align-items: center;

        span {
          margin-right: 10px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }

    .DailysaleList {
      flex: 1;
      // background: pink;
      display: flex;
      justify-content: space-between;

      .list {
        width: 336px;
        line-height: 24px;

        // background: #ccc;
        img {
          width: 336px;
          height: 336px;
          margin-bottom: 20px;
        }

        .name {
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          text-align: center;
          margin-bottom: 6px;
        }

        .saleType {
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
          margin-bottom: 15px;
      
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
        }

        .Price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .yesPrice {
            text-align: right;
            font-size: 28px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #dd2131;
            flex: 1;
            margin-right: 30px;
          }

          .noPrice {
            text-align-last: left;
            font-size: 24px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
            flex: 1;
          }

          .￥ {
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
   